<template>
  <div class="viewProject">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs" stretch >
      <el-tab-pane label="项目详情" name="details">
        <chargeIndex  />
        <managerIndex />
      </el-tab-pane>
      <el-tab-pane label="项目报表" name="statement">项目报表</el-tab-pane>
      <el-tab-pane label="项目动态" name="dynamic">项目动态</el-tab-pane>
      <el-tab-pane label="项目资料" name="datum">项目资料</el-tab-pane>
      <el-tab-pane label="项目资料" name="examine">项目审批</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import chargeIndex from './chargePages/index' //部门主管级页面
  import managerIndex from './managerPages/index' //经理级页面
  export default {
    components:{
      chargeIndex,
      managerIndex
    },
    data() {
      return {
        activeName: 'details'
      };
    },
    methods: {
      handleClick() {
        // console.log(this.activeName);
      }
    }
  };
</script>

<style lang="scss">
  .viewProject{
    .tabs{
      width: 100%;
      height: 800px;
      background: #f2f2f2;
      .el-tabs__item{
        font-size: 18px;
      }
      .is-active{
        font-weight: 600;
        color: black;
      }
      .el-tabs__active-bar{
        width: 50%;
        margin: 0 auto;
        background: black;
      }
      .el-tabs__content{
        margin: 0px 20px;
        background: #ffffff;
        padding: 10px;
      }
    }
  }

</style>
